<template>
  <div>
    <el-container>
      <el-row
        style="height: 50px; background-color: #e3e4e5; line-height: 50px"
      >
        <div style="margin-left: 25%">
          <!-- 位置 -->
          <span style="float: left">
            <i class="el-icon-location-information"></i>
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ this.district}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>北京</el-dropdown-item>
                <el-dropdown-item>上海</el-dropdown-item>
                <el-dropdown-item>深圳</el-dropdown-item>
                <el-dropdown-item>广东</el-dropdown-item>
                <el-dropdown-item>成都</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
           <!-- 首页 -->
          <el-link
            href="/"
            target="_blank"
            :underline="false"
            style="margin-left: 40%; float: left"
            >首页</el-link
          >
          <!-- 登录注册 -->
  <el-dropdown  v-if="this.token" style="float: left; margin-left: 1%">
            <el-link
              href="/login"
              target="_blank"
              :underline="false"
              style="float: left"
              >你好请登录</el-link
            >
            <el-link
              href="/register"
              type="danger"
              :underline="false"
              style="float: left"
              >免费注册
            </el-link> 
          </el-dropdown>
          <!-- 当前用户 -->
        <el-dropdown v-else  style="font-size: 13px;float:left;margin-left:1%">
            <span class="el-dropdown-link">
            当前用户：  {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="UserPassword"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click.native="zhuxiao">注销</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        <!-- 我的订单 -->
          <el-link
            target="_blank"
            href="/order"
            :underline="false"
            style="float: left; margin-left: 1%"
            >我的订单</el-link
          >
          <!-- 我的就爱 -->
          <el-dropdown style="margin-left: 1%">
            <span class="el-dropdown-link" style="float: left">
              我的就爱<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-link target="_blank" href="/address" :underline="false">
                <el-dropdown-item>收货地址</el-dropdown-item></el-link
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-row>
   <!-- 弹出的模态框 -->
      <el-dialog
        style="text-align: center"
        title="修改密码"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="formData">
          <el-form-item label="旧密码" label-width="70px">
            <el-input
              v-model="formData.Username"
              autocomplete="off"
              style="width: 25vw"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" label-width="70px">
            <el-input
              type="password"
              v-model="formData.password"
              autocomplete="off"
              style="width: 25vw"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" label-width="70px">
            <el-input
              type="password"
              v-model="formData.avatar"
              autocomplete="off"
              style="width: 25vw"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handSave">确 定</el-button>
        </div>
      </el-dialog>
      <router-view></router-view>
      <el-footer>
        Copyright © 2021-2021 就爱科技 版权所有. All rights reserved.
        <a
          href="https://beian.miit.gov.cn/#/Integrated/index"
          style="
            display: inline-block;
            text-decoration: none;
            margin-top: 30px;
            color: black;
            margin-left: 10px;
          "
        >
          闽ICP备2020020531号-1</a
        >
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35030302354423"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            color: black;
            margin-left: 10px;
          "
        >
          <img src="../assets/beian.png" style="float: left; width: 20px" />
          闽公网安备 35030302354423号</a
        >
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { getUsername, isLogin ,clearToken,getUserId} from "../Utils/auth";
import {  PasswordPost } from "../api/users";


export default {
  data() {
    return {
      username: getUsername(),
      token: true,
      district: "",
       //修改密码弹框
      dialogFormVisible: false,
      //修改密码的模态框数据
      formData: {
        id: "",
        Username: "",
        password: "",
        avatar: "",
      },
    };
  },
  methods: {
      zhuxiao() {
      //清理token
      clearToken();
      this.$router.push("/login");
    },
    //修改密码确认后的处理
    handSave() {
      this.formData.id = getUserId();
      console.log(this.formData);
      PasswordPost(this.formData).then((data) => {
        console.log(data);
        this.dialogFormVisible = false;
        if (data.data.code == 200) {
          this.$message({ type: "success", message: data.data.msg });
        } else {
          this.$message({ type: "error", message: data.data.msg });
        }
      });
    },
     //修改密码
    UserPassword() {
      this.dialogFormVisible = true;
    },
  },
  mounted() {
     if (isLogin()) {
      this.token = false;
    }
    var data = {
      key: "PIZBZ-USBL6-OUFSK-E5LF5-CLS5H-DPBGP", //这个key就是你申请的密钥
    };
    var url = "https://apis.map.qq.com/ws/location/v1/ip"; //这个就是地理位置信息的接口
    data.output = "jsonp";
    this.$jsonp(url, data)
      .then((res) => {
        console.log(res);
        this.district = res.result.ad_info.city;
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style>
body {
  margin: 0px !important;
  background-color: #f4f4f4;
}
.el-footer {
  background-color: #e3e4e5;
  margin-top: 10px;
  height: 100px;
  text-align: center;
  font-size: 14px;
}
</style>